<style>
	#workerHashrate{
		display: block;
		height: 340px;
	}
	#boxesWorkers > div {
		display: flex;
	}
	#boxesWorkers > div > div {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
	}
	.boxStatsList i.fa{
		height: 15px;
		width: 33px;
		text-align: center;
	}
	.boxStatsList > div{
		padding: 5px 20px;
	}
	.boxStatsList > div > div{
		padding: 3px;
	}
	input{
		background:none;
		outline:none;
		border:0px;
	}
	table {
		width: 100%;
	}
	.pure-table-pay {
		border-collapse: collapse;
		border-spacing: 0;
		empty-cells: show;
		border: 1px solid #cbcbcb;
		/*table-layout: fixed;*/
	}
	.pure-table-pay thead {
		background: #fff;
		color: #000;
		text-align: left;
		vertical-align: bottom;
	}
	.pure-table-pay thead tr{
		background-color:  #69b9e2;
		color:#fff;
	}
	.pure-table-pay td, .pure-table-pay th {
		border-width: 0 0 0 1px;
		font-size: inherit;
		margin: 0;
		overflow: visible;
		padding: 6px 12px;
		border: 1px solid #cbcbcb;
	}
	.pure-table-pay td:first-child, .pure-table-pay th:first-child {
		border-left-width: 0;
	}
	
	.payWrap .pure-table-pay td{
		text-overflow:ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.offline{
		color: red;
	}
	#topCharts{
		padding: 0px 13px;
	}
	#minerChart {
		width: 1120px;
		height: 380px;
	}
</style>
<div class="miner-container">
	<div class="info-wrap">
		<div class="info-row">
			<!--miner-address start-->
			<div class="desktop-100">
				<div class="miner-address">
					<small class="minerT1">Miner：</small>
					{{=String(it.stats.address).split(".")[0]}}
				</div>
			</div>
			<!--miner-address end-->
			<!--tabs start-->
			<div class="desktop-100">
				<div id="miner-tab">
					<div class="miner-tab-border">
						<!--<input  id="board" type="button" value="Ulordboard"/>-->
						<input class="active" id="rounds" type="button" value="Hashrate" />
						<input id="payouts" type="button" value="Payouts"/>
					</div>
					<div style="display:block;" class="handover">
                        <div class="miner-content-container">
                            <div class="miner-content-wrap">
                                <div class="faq-wrap">
                                    <div class="form-title">
                                        <h2 class="minerT7">details</h2>
                                    </div>
                                    <div id="topCharts">
                                        <div class="chartHolder" id="minerChart">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
						<div id="boxesWorkers">
							<div class="miner-content-container">
								<div class="miner-content-wrap">
									<div class="faq-wrap">
										<table class="pure-table-pay">
											<thead>
												<tr>
													<th><small class="minerT8">Name</small></th>
													<th><small class="minerT9">Hashrate(Current)</small></th>
													<th><small class="minerT10">Hashrate(Avg)</small></th>
													<th><small class="minerT11">Diff</small></th>
													<th><small class="minerT16">Last Share</th>
												</tr>
											</thead>
											<tbody></tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="handover">
						<div class="miner-content-container">
							<div class="miner-content-wrap">
								<div class="faq-wrap payWrap">
									{{ function readableDate(a){ return new Date(parseInt(a)).toString(); } }}
									{{ for(var pool in it.stats.pools) { }}
									<table class="pure-table-pay" id="statsTable">
										<thead>
											<tr>
												<!--<th class="minerT2">Blocks</th>-->
												<th class="minerT3">Time</th>
												<!--<th class="minerT5">Shares</th>-->
												<th class="minerT6" >Paid</th>
												<th class="minerT4">Txid</th>
											</tr>
										</thead>
										<tbody>

										</tbody>
									</table>
									{{ } }}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!--tabs end-->
		</div>
	</div>
</div>
<!--stats-->
<script>
    var _miner = "{{=String(it.stats.address).split(".")[0]}}";
    var payData = {{=JSON.stringify(it.stats.pools)}};
    // console.log('payData='+JSON.stringify(payData));
    var _workerCount = 0;
    window.statsSource = new EventSource("/api/live_stats");
    document.querySelector('main').appendChild(document.createElement('script')).src = '/static/miner_stats.js';
</script>
<script>
	$(function() {
        // switch
        function handover() {
            var oDiv=document.getElementById('miner-tab');
            var aBtn=oDiv.getElementsByTagName('input');
            var aDiv=oDiv.getElementsByClassName('handover');
            for(var i=0;i<aBtn.length;i++) {
                aBtn[i].index=i;
                aBtn[i].onclick=function ()
                {
                    for(var i=0;i<aBtn.length;i++)
                    {
                        aBtn[i].className='';
                        aDiv[i].style.display='none';
                    }
                    this.className='active';
                    aDiv[this.index].style.display='block';
                };
            };
        }
        handover();
        var blockscomb = [];
        //Datepicker
        function formatDateTime(timeStamp) {
            var date = new Date();
            date.setTime(timeStamp);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            var h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            var minute = date.getMinutes();
            var second = date.getSeconds();
            minute = minute < 10 ? ('0' + minute) : minute;
            second = second < 10 ? ('0' + second) : second;
            return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
        };

        var poolData = {{=JSON.stringify(it.stats.pools)}};
        var statAdd = {{=JSON.stringify(it.stats.address)}};
        var minerStats = '';
        for (var pool in poolData ) {
            for (var p in poolData[pool].bills) {
                var paid = poolData[pool].bills[p].payAmounts[statAdd.split(".")[0]];
                if (paid !== undefined){
                    minerStats += '<tr>'+
                        '<td>' + formatDateTime(poolData[pool].bills[p].time)+ '</td>' +
                       /* '<td>' + Math.round(poolData[pool].payments[p].shares)+ '</td>' +*/
                        '<td>'+ poolData[pool].bills[p].payAmounts[statAdd.split(".")[0]] +' '+ poolData[pool].symbol +'</td>' +
                        '<td><a href="http://testnet-explorer.ulord.one/tx/'+ poolData[pool].bills[p].txid +'" target="_blank">'+ poolData[pool].bills[p].txid +'</a></td>' +
                        ' </tr>'
				}
			}
            $('#statsTable tbody').html(minerStats);
		}
    });

</script>


